<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>g·Raphaël Dynamic Pie Chart</title>
        <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" charset="utf-8">
        <link rel="stylesheet" href="css/demo-print.css" type="text/css" media="print" charset="utf-8">
        <script src="../raphael-min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../g.raphael.js" type="text/javascript" charset="utf-8"></script>
        <script src="../g.pie.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            window.onload = function () {
                var r = Raphael("holder"),
                    pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], 
                            { legend: ["%%.%% - Enterprise Users", "IE Users"], 
                        legendpos: "west", 
                        href: ["http://raphaeljs.com", "http://g.raphaeljs.com"],
                        //init: 2000
                               });

                r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px 'Fontin Sans', Fontin-Sans, sans-serif" });
                pie.hover(function () {
                    alert("hover");
                    this.sector.stop();
                    this.sector.scale(1.1, 1.1, this.cx, this.cy);

                    if (this.label) {
                        this.label[0].stop();
                        this.label[0].attr({ r: 7.5 });
                        this.label[1].attr({ "font-weight": 800 });
                    }
                }, function () {
                    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");

                    if (this.label) {
                        this.label[0].animate({ r: 5 }, 500, "bounce");
                        this.label[1].attr({ "font-weight": 400 });
                    }
                });
            };
        </script>
    </head>
    <body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
        <div id="holder"></div>
        <p>
            Pie chart with legend, hyperlinks on two first sectors and hover effect.
        </p>
        <p>
            Demo of <a href="http://g.raphaeljs.com/">g·Raphaël</a> JavaScript library.
        </p>
    </body>
</html>
